<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

import { defineMessage } from '@/locales'
import { useCurrentReport, useCurrentReportID } from './composables/useCurrentReport'

import DecodeTable from './DecodeTable.vue'
import MIMOChart from './MIMOChart.vue'

import enUS from './locales/en-US.json' with { type: 'json' }
import zhCN from './locales/zh-CN.json' with { type: 'json' }

useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const { reportID } = useCurrentReportID()
const { isDecoding, isPlotting, report } = useCurrentReport(reportID)
</script>

<template>
  <div class="pb-xs">
    <DecodeTable :reportID :decodeContent="report?.content?.decode" :isDecoding />
    <MIMOChart :reportID :plotContent="report?.content?.plot" :isPlotting class="mt-xs" />
  </div>
</template>
